<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多附件上传</title>
    <script src="../../WF/Scripts/bootstrap/js/jquery.min.js" type="text/javascript"></script>
    <script src="../../WF/Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../../WF/Scripts/config.js" type="text/javascript"></script>
    <script src="../../WF/Comm/Gener.js" type="text/javascript"></script>
    <script src="../layui-v2.8.18/layui.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../layui-v2.8.18/css/layui.css">
</head>
<body>
<div class="layui-fluid" style="margin: 10px 0">
    <div class="layui-upload">

        <button type="button" class="layui-btn layui-bg-blue" id="ID-upload-demo-files">选择多文件</button>

        <div class="layui-upload-list">

            <table class="layui-table">

                <colgroup>

                    <col style="min-width: 100px;">

                    <col width="150">

                    <col width="260">

                    <col width="150">

                </colgroup>

                <thead>

                <th>文件名</th>

                <th>大小</th>

                <th>上传进度</th>

                <th>操作</th>

                </thead>

                <tbody id="ID-upload-demo-files-list"></tbody>

            </table>

        </div>

        <button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>

    </div>
</div>
<script>

    layui.use(function () {

        var upload = layui.upload;

        var element = layui.element;

        var $ = layui.$;

        var handler = 'BP.CCOA.HttpHandler.CCOA_Knowledge';

        var method = 'Knowledge_UploadFile_MinAth';

        var url = '/WF/Comm/ProcessRequest?DoType=HttpHandler&DoMethod=' + method + '&HttpHandlerName=' + handler;

        // 制作多文件上传表格
        var uploadListIns = upload.render({

            elem: '#ID-upload-demo-files',

            elemList: $('#ID-upload-demo-files-list'), // 列表元素对象

            url: url, // 实际使用时改成您自己的上传接口即可。

            accept: 'file',

            data: { RefPKVal: GetQueryString("RefPKVal") },

            multiple: true,

            number: 5,

            auto: false,

            bindAction: '#ID-upload-demo-files-action',

            choose: function (obj) {

                var that = this;

                var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列

                // 读取本地文件

                obj.preview(function (index, file, result) {

                    var tr = $(['<tr id="upload-' + index + '">',

                        '<td>' + file.name + '</td>',

                        '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>',

                        '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>',

                        '<td>',

                        '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',

                        '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',

                        '</td>',

                        '</tr>'].join(''));


                    // 单个重传

                    tr.find('.demo-reload').on('click', function () {

                        obj.upload(index, file);

                    });


                    // 删除

                    tr.find('.demo-delete').on('click', function () {

                        delete files[index]; // 删除对应的文件

                        tr.remove(); // 删除表格行

                        // 清空 input file 值，以免删除后出现同名文件不可选

                        uploadListIns.config.elem.next()[0].value = '';

                    });


                    that.elemList.append(tr);

                    element.render('progress'); // 渲染新加的进度条组件

                });

            },

            done: function (res, index, upload) { // 成功的回调

                var that = this;

                // if(res.code == 0){ // 上传成功

                var tr = that.elemList.find('tr#upload-' + index)

                var tds = tr.children();

                tds.eq(3).html(''); // 清空操作

                delete this.files[index]; // 删除文件队列已经上传成功的文件

                return;

                //}

                this.error(index, upload);

            },

            allDone: function (obj) { // 多文件上传完毕后的状态回调

                console.log(obj)

            },

            error: function (index, upload) { // 错误回调

                var that = this;

                var tr = that.elemList.find('tr#upload-' + index);

                var tds = tr.children();

                // 显示重传

                tds.eq(3).find('.demo-reload').removeClass('layui-hide');

            },

            progress: function (n, elem, e, index) { // 注意：index 参数为 layui 2.6.6 新增

                element.progress('progress-demo-' + index, n + '%'); // 执行进度条。n 即为返回的进度百分比

            }

        });

    });

</script>
</body>
</html>